<template>
  <!-- 模态框遮罩层 -->
  <transition name="modal-fade">
    <div v-if="visible" class="modal-overlay" @click="handleClose">
      <div class="modal-container" @click.stop>
        <!-- 标题 -->
        <div class="modal-header">
          <h2>选择大棚</h2>
          <button class="close-btn" @click="handleClose">
            <span>✕</span>
          </button>
        </div>

        <!-- 大棚卡片列表 -->
        <div class="greenhouse-grid">
          <div
            v-for="greenhouse in greenhouses"
            :key="greenhouse.id"
            :class="['greenhouse-card', { active: selectedId === greenhouse.id }]"
            @click="selectGreenhouse(greenhouse)"
          >
            <div class="card-icon">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 2L3 9V21H21V9L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M9 21V13H15V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <div class="card-content">
              <h3>{{ greenhouse.name }}</h3>
              <div class="card-info">
                <div class="info-item">
                  <span class="label">位置：</span>
                  <span class="value">{{ greenhouse.address }}</span>
                </div>
                <div class="info-item">
                  <span class="label">面积：</span>
                  <span class="value">{{ greenhouse.area }}m²</span>
                </div>
                <div class="info-item">
                  <span class="label">设备数：</span>
                  <span class="value">{{ greenhouse.deviceCount }}个</span>
                </div>
              </div>
            </div>
            <div class="card-status">
              <span v-if="selectedId === greenhouse.id" class="status-badge">当前选择</span>
              <span v-else class="status-badge inactive">点击选择</span>
            </div>
          </div>
        </div>

        <!-- 底部按钮 -->
        <div class="modal-footer">
          <button class="btn btn-cancel" @click="handleClose">取消</button>
          <button class="btn btn-confirm" @click="handleConfirm" :disabled="!selectedId">
            确认切换
          </button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup>
import { ref, watch } from 'vue';
import axios from 'axios';
import { useStore } from '@/store/index.js';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  currentGreenhouseId: {
    type: Number,
    default: 1
  }
});

const emit = defineEmits(['close', 'select']);

const selectedId = ref(props.currentGreenhouseId);
const greenhouses = ref([
  {
    id: 1,
    name: '1号温室',
    address: '河南省郑州市',
    area: 500,
    deviceCount: 8,
    status: 'online'
  },
  {
    id: 2,
    name: '2号温室',
    address: '河南省洛阳市',
    area: 800,
    deviceCount: 8,
    status: 'online'
  }
]);

// 监听props变化
watch(() => props.currentGreenhouseId, (newVal) => {
  selectedId.value = newVal;
});

watch(() => props.visible, async (newVal) => {
  if (newVal) {
    // 模态框打开时，可以从后端获取最新的大棚列表
    await fetchGreenhouses();
  }
});

// 获取大棚列表
const fetchGreenhouses = async () => {
  try {
    const userStore = useStore();
    const token = userStore.token;
    
    const response = await axios.get('/api/greenhouse/all', {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    });
    
    if (response.data && Array.isArray(response.data)) {
      greenhouses.value = response.data.map(gh => ({
        id: gh.id,
        name: gh.name || `${gh.id}号温室`,
        address: gh.address || '未设置',
        area: gh.area || 0,
        deviceCount: 8, // 可以从后端获取实际设备数
        status: 'online'
      }));
    }
  } catch (error) {
    console.log('获取大棚列表失败，使用默认数据:', error);
    // 失败时使用默认数据，不影响用户体验
  }
};

const selectGreenhouse = (greenhouse) => {
  selectedId.value = greenhouse.id;
};

const handleClose = () => {
  emit('close');
};

const handleConfirm = () => {
  if (selectedId.value) {
    const selected = greenhouses.value.find(gh => gh.id === selectedId.value);
    emit('select', selected);
    handleClose();
  }
};
</script>

<style scoped>
/* 模态框动画 */
.modal-fade-enter-active,
.modal-fade-leave-active {
  transition: opacity 0.3s ease;
}

.modal-fade-enter-from,
.modal-fade-leave-to {
  opacity: 0;
}

.modal-fade-enter-active .modal-container,
.modal-fade-leave-active .modal-container {
  transition: transform 0.3s ease;
}

.modal-fade-enter-from .modal-container,
.modal-fade-leave-to .modal-container {
  transform: scale(0.9) translateY(-20px);
}

/* 模态框遮罩层 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* 模态框容器 */
.modal-container {
  background: linear-gradient(135deg, #1e2a38 0%, #0f1b2b 100%);
  border-radius: 16px;
  box-shadow: 0 0 40px rgba(41, 144, 255, 0.3), 0 20px 60px rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(52, 128, 238, 0.4);
  width: 90%;
  max-width: 900px;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 模态框头部 */
.modal-header {
  padding: 25px 30px;
  background: linear-gradient(90deg, rgba(41, 144, 255, 0.15) 0%, rgba(52, 128, 238, 0.05) 100%);
  border-bottom: 2px solid rgba(52, 128, 238, 0.3);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  color: #2990ff;
  font-size: 26px;
  font-weight: bold;
  margin: 0;
  text-shadow: 0 0 10px rgba(41, 144, 255, 0.5);
}

.close-btn {
  background: none;
  border: none;
  color: #7aa3e0;
  font-size: 28px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.close-btn:hover {
  background: rgba(255, 59, 48, 0.2);
  color: #ff3b30;
  transform: rotate(90deg);
}

/* 大棚卡片网格 */
.greenhouse-grid {
  padding: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 20px;
  overflow-y: auto;
  flex: 1;
}

/* 滚动条样式 */
.greenhouse-grid::-webkit-scrollbar {
  width: 8px;
}

.greenhouse-grid::-webkit-scrollbar-track {
  background: rgba(15, 27, 43, 0.5);
  border-radius: 4px;
}

.greenhouse-grid::-webkit-scrollbar-thumb {
  background: rgba(52, 128, 238, 0.5);
  border-radius: 4px;
}

.greenhouse-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(41, 144, 255, 0.7);
}

/* 大棚卡片 */
.greenhouse-card {
  background: linear-gradient(135deg, rgba(38, 51, 68, 0.9) 0%, rgba(31, 43, 61, 0.9) 100%);
  border: 2px solid rgba(52, 128, 238, 0.3);
  border-radius: 12px;
  padding: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.greenhouse-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #2990ff, #3480ee);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.greenhouse-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(41, 144, 255, 0.4);
  border-color: rgba(52, 128, 238, 0.6);
}

.greenhouse-card:hover::before {
  opacity: 1;
}

.greenhouse-card.active {
  border-color: #2990ff;
  background: linear-gradient(135deg, rgba(41, 144, 255, 0.15) 0%, rgba(52, 128, 238, 0.1) 100%);
  box-shadow: 0 0 30px rgba(41, 144, 255, 0.3);
}

.greenhouse-card.active::before {
  opacity: 1;
}

/* 卡片图标 */
.card-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, rgba(41, 144, 255, 0.2), rgba(52, 128, 238, 0.2));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  color: #2990ff;
  transition: all 0.3s ease;
}

.greenhouse-card:hover .card-icon {
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(41, 144, 255, 0.4);
}

.card-icon svg {
  width: 32px;
  height: 32px;
}

/* 卡片内容 */
.card-content h3 {
  color: #f1f1f1;
  font-size: 22px;
  font-weight: bold;
  margin: 0 0 15px 0;
}

.card-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-item {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.info-item .label {
  color: #7aa3e0;
  margin-right: 8px;
  min-width: 60px;
}

.info-item .value {
  color: #f1f1f1;
  font-weight: 500;
}

/* 状态标签 */
.card-status {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}

.status-badge {
  padding: 6px 16px;
  background: linear-gradient(90deg, #2990ff, #3480ee);
  color: #fff;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 4px 15px rgba(41, 144, 255, 0.4);
  animation: pulse 2s ease-in-out infinite;
}

.status-badge.inactive {
  background: rgba(122, 163, 224, 0.3);
  color: #7aa3e0;
  box-shadow: none;
  animation: none;
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 4px 15px rgba(41, 144, 255, 0.4);
  }
  50% {
    box-shadow: 0 4px 25px rgba(41, 144, 255, 0.6);
  }
}

/* 底部按钮区 */
.modal-footer {
  padding: 20px 30px;
  background: linear-gradient(90deg, rgba(41, 144, 255, 0.05) 0%, rgba(52, 128, 238, 0.05) 100%);
  border-top: 2px solid rgba(52, 128, 238, 0.3);
  display: flex;
  justify-content: flex-end;
  gap: 15px;
}

.btn {
  padding: 12px 30px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 120px;
}

.btn-cancel {
  background: rgba(122, 163, 224, 0.2);
  color: #7aa3e0;
  border: 1px solid rgba(122, 163, 224, 0.4);
}

.btn-cancel:hover {
  background: rgba(122, 163, 224, 0.3);
  transform: translateY(-2px);
}

.btn-confirm {
  background: linear-gradient(90deg, #2990ff, #3480ee);
  color: #fff;
  box-shadow: 0 4px 15px rgba(41, 144, 255, 0.4);
}

.btn-confirm:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(41, 144, 255, 0.6);
}

.btn-confirm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>

